<script setup>
import { ref, watch } from 'vue'
import {useRouter} from 'vue-router'
import {User,Lock,Star,Iphone,OfficeBuilding} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import * as Api from "@/api/login.js";
const router = useRouter()
const ro = ref('老师')
const formModel = ref({
  id: '',
  username: '',
  password: '',
  repassword: '',
  role:'',
  gender:'',
  tel:'',
  department:'',
})
const rules = {
  id: [
    { required: true, message: '请输入账号', trigger: 'blur'},
    {min: 2, max: 10,message: '账号必须是2-10位的字符', trigger: 'blur'}
  ],
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 2, max: 10,message: '用户名必须是2-10位的字符', trigger: 'blur'}
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur'},
    {pattern: /^\S{6,15}$/, message: '密码必须是6-15位非空字符',trigger: 'blur'}
  ],
  tel: [
    { required: true, message: '请输入电话号码', trigger: 'blur'},
    {pattern: /^\S{11}$/, message: '电话号码必须是11位字符',trigger: 'blur'}
  ],
  department: [
    { required: true, message: '请输入部门', trigger: 'blur'},
  ],
  repassword: [
    { required: true, message: '请输入密码', trigger: 'blur'},
    {pattern: /^\S{6,15}$/, message: '密码必须是6-15位非空字符',trigger: 'blur'},
    {
      validator: (rule, value, callback) => {
        //value 检验是否一致
        if (value !== formModel.value.password) {
          callback(new Error('两次输入不一样'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}
const  isRegister =ref(false)
const  isadmain =ref(true)
// 切换的时候，重置表单内容
watch(isRegister, () => {
  formModel.value = {
    id:'',
    username: '',
    password: '',
    repassword: '',
    role:'',
    gender:'',
    tel:'',
    department: '',
  }
})
const jiaoshi =() => {
  isRegister.value = true
  isadmain.value = false
}
const admain =() => {
  isRegister.value = true
  isadmain.value = true
}
const login = async () => {
  let result = await Api.login({
    username: formModel.value.username,
    id:formModel.value.id,
    password: formModel.value.password
  })
  if(result.code === 200){
    ElMessage.success(result.message)
    localStorage.setItem("token" , JSON.stringify(result.data.token))
    localStorage.setItem("name" , JSON.stringify(result.data.username))
    localStorage.setItem("id" , JSON.stringify(result.data.id))
    localStorage.setItem("role" , JSON.stringify(result.data.role))
    localStorage.setItem("tel" , JSON.stringify(result.data.tel))
    // localStorage.setItem("department" , JSON.stringify(result.data.department))
    console.log(localStorage.getItem("name"))
    router.push('/sy')
  }else {
    ElMessage.error(result.message)
  }
}
const register = async () => {
  let result = await Api.add({
    "id" : formModel.value.id,
    "username": formModel.value.username,
    "password":formModel.value.password,
    "gender":formModel.value.gender,
    "role":ro.value,
    "tel":formModel.value.tel,
  })
  if(result.code === 200 ){
    let res = await Api.addt({
      "id" : formModel.value.id,
      "name": formModel.value.username,
      "department":formModel.value.department,
    })
    if (res.code === 200){
      ElMessage.success('注册成功，请返回登录')
      isRegister.value = false
    }else {
      ElMessage.error(res.message)
    }
  }else {
    ElMessage.error(result.message)
  }
}
</script>
<template>
  <div class="bg" style="display: flex;justify-content: center;align-items: center;">
    <div class="login" style="width: 600px;height: 600px; ">
      <el-card style="height: 650px;width:600px;">
        <div style="display: flex;position: relative;left: 20px">
          <img src="../../src/image/login.png" style="width: 70px;height: 70px;">
          <h2 style="color: black;font-size: 50px;margin-bottom: 30px;"v-show="isRegister">注册</h2>
          <h2 style="color: black;font-size: 50px;margin-bottom: 30px;"v-show="!isRegister">登录</h2>
        </div>
        <el-form
            :model="formModel"
            :rules="rules"
            ref="from"
            size="default"
            autocomplete="off"
            v-if="isRegister"

        >
          <el-form-item prop="id">
            <el-input
                v-model="formModel.id"
                :prefix-icon="Star"
                placeholder="账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="username">
            <el-input
                v-model="formModel.username"
                :prefix-icon="User"
                placeholder="姓名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="tel">
            <el-input
                v-model="formModel.tel"
                :prefix-icon="Iphone"
                placeholder="电话号码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="tel">
            <el-input
                v-model="formModel.department"
                :prefix-icon="OfficeBuilding"
                placeholder="部门"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
                v-model="formModel.password"
                :prefix-icon="Lock"
                type="password"
                placeholder="密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="repassword">
            <el-input
                v-model="formModel.repassword"
                :prefix-icon="Lock"
                type="password"
                placeholder="再次输入密码"
            ></el-input>
          </el-form-item>

<!--          <el-form-item class="flex">-->
<!--            <div class="flex">-->
<!--              <div class="mb-2 ml-4">-->
<!--                <el-radio-group v-model="formModel.role">-->
<!--                  <el-radio value="教师" size="large">教师</el-radio>-->
<!--                  <el-radio value="管理员" size="large">管理员</el-radio>-->
<!--                </el-radio-group>-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-form-item>-->
          <el-form-item class="flex" >
            <div class="flex">
              <div class="mb-2 ml-4">
                <el-radio-group v-model="formModel.gender" style="margin-left:80px">
                  <el-radio value="男" size="large">男</el-radio>
                  <el-radio value="女" size="large">女</el-radio>
                </el-radio-group>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
                @click="register"
                class="button"
                type="primary"
                auto-insert-space
                style="position: absolute;left: 80px;width: 150px"
            >
              注册
            </el-button>
          </el-form-item>
          <el-form-item class="flex">
            <el-link type="info" :underline="false" @click="isRegister = false">
              ← 返回
            </el-link>
          </el-form-item>
        </el-form>
        <!-- 登录相关表单 -->
        <el-form
            :model="formModel"
            :rules="rules"
            ref="form"
            size="large"
            autocomplete="off"
            v-else
        >

          <el-form-item prop="id" style="margin-top: 50px">
            <el-input
                v-model="formModel.id"
                :prefix-icon="Star"
                placeholder="账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="username">
            <el-input
                v-model="formModel.username"
                :prefix-icon="User"
                placeholder="姓名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
                v-model="formModel.password"
                name="password"
                :prefix-icon="Lock "
                type="password"
                placeholder="密码"
            ></el-input>
          </el-form-item>

          <el-form-item class="flex" style="margin-left: 40px">
            <div class="flex">
              <el-link type="primary" :underline="false">忘记密码？</el-link>
            </div>
          </el-form-item>
          <el-form-item style="display: flex;align-items: end">
            <el-button
                @click="login"
                class="button"
                type="primary"
                auto-insert-space
                style="position: absolute;left: 80px;width: 150px"
            >登录</el-button>
          </el-form-item>
<!--          <el-form-item class="flex">-->
<!--            <el-link type="info" :underline="false" @click="jiaoshi()">-->
<!--              教师注册 →-->
<!--            </el-link>-->
<!--          </el-form-item>-->
<!--          <el-form-item class="flex">-->
<!--            <el-link type="info" :underline="false" @click="admain()">-->
<!--             管理员注册 →-->
<!--            </el-link>-->
<!--          </el-form-item>-->
        </el-form>

      </el-card>
    </div>
    <div style="position: absolute;right:100px;bottom: 20px;color: #606266;font-family: '微軟正黑體 Light'">
      <h3>欢迎使用南泰科英语教学平台</h3>
    </div>
  </div>
</template>
<style>
html, body, #app {
  height: 100%;
  background-color:rgb(121.3, 187.1, 255);
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.bg {
  height: 100%;
  width: 100%;
  background-image: url('@/image/login2.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.el-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  .title {
    margin: 0 auto;
  }
  .button {
    margin:auto;
  }
  .flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}
.el-input__wrapper {
  box-shadow:  none;
  background-color: white;
  border-bottom: solid 1px rgb(51.2, 126.4, 204);
  border-radius: 0;

}
.el-input {
  margin-bottom: 15px;
  font-size: 16px;
  width: 400px;
}
.el-input__wrapper:hover {
  box-shadow: none;
  margin: auto;
}

</style>